<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GNB</title>

<!-- 
	[ step ]

	01. 1뎁스 기본 레이아웃.
	02. 2뎁스 기본 레이아웃.
	03. 1뎁스 인터렉티브 적용.
	04. step03 단계 코드 리펙토링.
	05. 1뎁스 인터렉티브 모션적용.
	06. 서브메뉴 이동.
	07. 서브아이템 인터렉션.
	08. 서브아이템 컨테이너 마스크.
	09. 하이라이터.
	10. 선택값 설정.
	11. 사이즈 조절과 서브값 없을 때 예외처리.
-->

<style type="text/css">

	*{ padding: 0px; margin: 0px; }

	.depth1_container{
		width: 520px;
		background-color: #EEE;
		height: 50px;
	}

	.depth1_menu_item_list{
		list-style: none;
		height: 20px;
		overflow: hidden;
		top: 15px;
		position: relative;
	}

	.depth1_menu_item{
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 18px;
		position: relative;
	}

	.depth1_menu_item div{
		text-align: center;
	}

	.depth2_container{
		width: 1000px;
		position: relative;
	}

	.depth2_menu_item_list{
		display: inline-block;
	}

	.depth2_menu_item{
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 11px;
	}

	.depth2_mask{
		overflow: hidden;
		position: relative;
		background-color: #DDDDDD;
	}

	.highlighter{
		background-color: #FFDD00;
		position: absolute;
	}

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript">
	$( document ).ready( function(){
		
		var j_gnb = $( ".gnb" );
		var j_depth1Container = $( ".depth1_container" );
		var j_depth1Items = $( ".depth1_menu_item" );
		var j_depth2Container = $( ".depth2_container" );
		var j_depth2List = $( ".depth2_menu_item_list" );
		var j_depth2Items = $( ".depth2_menu_item" );
		var j_depth2Mask = $( ".depth2_mask" );
		var j_highlighter = $( ".highlighter" );
		var j_selectedItem = null;
		var j_overItem = null;
		var j_selectedSubItem = null;
		var j_overSubItem = null;
		
		initEvent();
		initSize();
		initProperties();

		function initEvent(){

			j_gnb.on( "mouseleave", function( event ){
				deactiveDepth1Item( j_overItem );
				deactiveDepth2Item( j_overSubItem );
				activeDepth1Item( j_selectedItem );
				activeDepth2Item( j_selectedSubItem );
			});

			j_depth1Items.on( "mouseenter", function( event ){
				var j_this = $( this );
				deactiveDepth1Item( j_overItem );
				deactiveDepth2Item( j_overSubItem );
				deactiveDepth1Item( j_selectedItem );
				activeDepth1Item( j_this );
				j_overItem = j_this;
			} );

			j_depth2Items.on( "mouseenter", function( event ){
				var j_this = $( this );
				deactiveDepth2Item( j_overSubItem );
				deactiveDepth2Item( j_selectedSubItem );
				activeDepth2Item( j_this );
				j_overSubItem = j_this;
			} );
		}

		function initSize(){
			j_depth2Mask.css( "width", 0 );
			j_highlighter.css( "height", j_depth1Container.outerHeight() );
		}

		function initProperties(){
			setSelectedIndex( 3, 1 );	
		}
	

		function setSelectedIndex( index1, index2 ){
			if( index1 == null || index1 == undefined ) return;
			j_selectedItem = j_depth1Items.eq( index1 );
			if( !j_selectedItem[0] ) return;
			activeDepth1Item( j_selectedItem );
			
			if( index2 == null || index2 == undefined ) return;
			j_selectedSubItem = j_depth2List.eq( index1 ).find( ".depth2_menu_item" ).eq( index2 );
			if( !j_selectedSubItem[0] ) return;
			activeDepth2Item( j_selectedSubItem );
		}

		function activeDepth1Item( j_item ){
			if( !j_item ) return;
			j_item.stop();
			j_item.animate( {  top:-20 }, 150 );
			moveSubContainer( j_item );
		}

		function deactiveDepth1Item( j_item ){
			if( !j_item ) return;
			j_item.stop();
			j_item.animate( {  top:0 }, 150 );
		}

		function activeDepth2Item( j_item ){
			if( !j_item ) return;
			j_item.css( {color: "red"} );
		}

		function deactiveDepth2Item( j_item ){
			if( !j_item ) return;
			j_item.css( {color: "black"} );
		}

		function moveSubContainer( j_item ){

			var index = j_depth1Items.index( j_item );
			var paddingLeft = parseInt( j_item.css( "padding-left") );
			var j_targetList = j_depth2List.eq( index );
			var itemPosX = j_item.position().left;

			j_highlighter.animate( { left:itemPosX , width:j_item.outerWidth() }, 150 ); 
			
			if( !j_targetList[ 0 ] ){
				j_depth2Mask.animate( {  left:itemPosX, width:0 }, 150 );
				return;
			}

			var targetX = j_targetList.position().left;
			var maskWidth = j_targetList.outerWidth();
			var limitPosX = j_depth1Container.outerWidth();
			if( itemPosX + maskWidth > limitPosX ){
				var measure = itemPosX + maskWidth - limitPosX;
				itemPosX -= measure;
			}

			j_depth2Container.stop();
			j_depth2Container.animate( {  left:-targetX }, 150 );
			j_depth2Mask.stop();
			j_depth2Mask.animate( {  left:itemPosX, width:maskWidth }, 150 );
		}
	
	});
</script>

</head>
<body>
	<div class="gnb">
		<div class="depth1_container">
			<div class="highlighter"> </div>
			<ul class="depth1_menu_item_list ">
					<li class="depth1_menu_item">
						<div>Info</div>
						<div>소개</div>
					</li>
					<li class="depth1_menu_item">
						<div>Communty</div>
						<div>커뮤니티</div>
					</li>
					<li class="depth1_menu_item">
						<div>Study</div>
						<div>스터디</div>
					</li>
					<li class="depth1_menu_item">
						<div>Store</div>
						<div>스토어</div>
					</li>
					<li class="depth1_menu_item">
						<div>Event</div>
						<div>이벤트</div>
					</li>
			</ul>
			
		</div>

		<div class="depth2_mask">
			<div class="depth2_container">
				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Hello Webdongne</li>
						<li class="depth2_menu_item">Contact Us</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Free Board</li>
						<li class="depth2_menu_item">Forum</li>
						<li class="depth2_menu_item">Issue</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">HTML/CSS</li>
						<li class="depth2_menu_item">Java Script</li>
						<li class="depth2_menu_item">JQuery</li>
						<li class="depth2_menu_item">Edge</li>
						<li class="depth2_menu_item">Node JS</li>
						<li class="depth2_menu_item">HTML5</li>
						<li class="depth2_menu_item">Tizen</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Web Contents</li>
						<li class="depth2_menu_item">E-Book</li>
						<li class="depth2_menu_item">Video Tutorial</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>